<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

import headerUtil from "./base/common/headerUtil.vue";
import orderItemUtil from "./base/order/orderItemUtil.vue";
import reqApis from '../req/reqApis.js';
import Client from "../req/common.js";

const router = useRouter();

const scrollOutRef = ref();

const currentData = ref<any>({
  arr: ["完结订单","派送订单","取消订单","所有订单"],
  orderType: router.currentRoute.value.query.type || 0,
  headerObj:{
    showType: 2
  },
  list:[],
  pageIndex: 1,
  pageSize: 10,
  isStop: false,
  orderNo: null,
});

const getOrderListFn = () => {
  if(!currentData.value.isStop){
    let params = {
      orderNo: currentData.value.orderNo,
      page: currentData.value.pageIndex,
      size: currentData.value.pageSize,
      orderType: currentData.value.orderType,

    };
    reqApis.getOrderListByBuyerIdApi(params).then((res:any) => {
      if(res.data != null && res.data.length>0){
        currentData.value.list.push(...res.data)
      }else{
        currentData.value.isStop = true
      }
    })
  }
};

const select = (index:any) => {
  currentData.value.orderType = index;
  currentData.value.isStop = false;
  currentData.value.pageIndex = 1;
  currentData.value.list = [];
  getOrderListFn();
  
}

const refreshFn = () => {
  // currentData.value.orderType = index;
  currentData.value.isStop = false;
  currentData.value.pageIndex = 1;
  currentData.value.list = [];
  getOrderListFn();
  
}

const scrollData = () => {
  let outH = scrollOutRef.value.scrollHeight,
      currentH = scrollOutRef.value.offsetHeight,
      offH = scrollOutRef.value.scrollTop;
    if(currentH + offH >= (outH-1)){
      currentData.value.pageIndex += 1;
      getOrderListFn();
    }
};

getOrderListFn();
</script>
<template>
  <section class="orderMaster">
    <headerUtil :obj="currentData.headerObj">我的订单</headerUtil>
    <div class="orderSearch">
      <div class="wrap">
        <input type="number" placeholder="订单号" @blur="select(currentData.orderType)" v-model.trim="currentData.orderNo">
      </div>
    </div>
    <section class="orderMeun">
      <div class="item" :class="{'active': currentData.orderType==index}"  @click="select(index)" v-for="(item, index) in currentData.arr" :key="index">{{item}}</div>
    </section>
    <div class="content" @scroll.passive="scrollData" ref="scrollOutRef">
    <orderItemUtil v-for="(item,index) in currentData.list" :key="index" @refresh="refreshFn()" :order="item"></orderItemUtil>
    </div>
  </section>
</template>

<style lang="less" scoped>
.orderMaster {
  display: flex;
  width: 3.75rem;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  .content {
    padding-top: .15rem;
    flex: 1;
    overflow-y: auto;
  }
  .orderSearch {
    width: 3.75rem;
    height: .46rem;
    padding: .08rem .1rem;
    box-sizing: border-box;
    .wrap {
      height: .3rem;
      border-radius: .3rem;
      background: white;
      position: relative;
      font-size: .12rem;
      padding: 0 .3rem;
      input {
        width: 2.95rem;
        height: .3rem;
        color:#999;
        font-size: 14px;
      }
      &::after {
        position: absolute;
        content: "";
        top: .08rem;
        left: .1rem;
        width: .15rem;
        height: .15rem;
        background: url("../assets/images/search-icon-2.png") center no-repeat;
        background-size: contain;
      }
    }
  }
  .orderMeun {
    width: 3.75rem;
    height: .43rem;
    background: white;
    border-bottom: .01rem solid #e5e5e5;
    display: flex;
    font-size: 14px;
    color: #333;
    margin-bottom: .15rem;
    .item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      &.active {
        color: #e93b3d;
        &::after{
          width: .56rem;
          height: .03rem;
          background: #e93b3d;
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -.28rem;
        }
      }
    }
  }
}
</style>

